<template>
  <div class="report bg-white px-5 pt-3 box-border">
    <div class="rep-top flex justify-between items-center">
      <span class="title">体测报告</span>
      <span class="history" @click="reqHistory">历史记录</span>
    </div>
    <div class="cont">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-change="getReportData" :value="activeName">
        <el-tab-pane label="脉率" name="3">
          <Hr v-if="activeName == '3'" :reportData="reportObj" :big-font-flag="false"/>
        </el-tab-pane>
        <el-tab-pane label="血氧" name="2">
          <SaO2 v-if="activeName == '2'" :reportData="reportObj" :big-font-flag="false"/>
        </el-tab-pane>
        <el-tab-pane label="体温" name="1">
          <Temperature v-if="activeName == '1'" :reportData="reportObj" :big-font-flag="false"/>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>

  <el-dialog v-model="showHistory" title="历史记录" width="680px" :close-on-click-modal="false">
    <el-alert title="体温数据 * 代表疑似体温传感器未佩戴规范；脉率、血氧数据显示 / 代表监测数据明显异常。" type="warning" :closable="false" show-icon style="margin-bottom: 10px;" />
    <el-table :data="historyData" v-loading="historyDataLoading" size="small" height="400">
      <el-table-column prop="heartRate" label="脉率" align="center">
        <template #default="scope">
          <span v-if="scope.row.heartRate == 70 && scope.row.spo2 == 95">/</span>
          <span v-else>{{scope.row.heartRate||"--"}}次/分钟</span>
        </template>
      </el-table-column>
      <el-table-column prop="spo2" label="血氧" align="center">
        <template #default="scope">
          <span v-if="scope.row.heartRate == 70 && scope.row.spo2 == 95">/</span>
          <span v-else>{{scope.row.spo2||"--"}}%</span>
        </template>
      </el-table-column>
      <el-table-column prop="temperature" label="体温" align="center">
        <template #default="scope">
          <span v-if="scope.row.plugStatus==='0'">未插入</span>
          <span v-if="scope.row.plugStatus==='2'">不合法</span>
          <span v-if="scope.row.plugStatus!=='0' && scope.row.plugStatus!=='2'">
            <span v-if="scope.row.temperature&&scope.row.temperature!=247&&scope.row.temperature!=451">
              <span v-if="scope.row.temperature/10 < 35" style="color: #F56C6C; font-size: 12px;">*</span>
              {{scope.row.temperature/10}}℃
            </span>
            <span v-else>--</span>
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="acquisitionTime" label="时间" align="center" />
    </el-table>
    <div style="display: flex; justify-content: flex-end; margin-top: 10px;">
      <el-pagination
        v-model:current-page="queryHistory.page"
        v-model:page-size="queryHistory.pageSize"
        background size="mini"
        layout="total, prev, pager, next"
        :total="queryHistory.total"
        @current-change="currentPageChange"
      />
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import {storeToRefs} from 'pinia'
import {reactive, ref, toRefs, watch} from 'vue'
import SaO2 from './saO2.vue'
import Hr from './hr.vue'
import Temperature from './temperature.vue'

import {usePatientStore} from '@/store/modules/patient'
import {reportData} from '@/api/patient'
import {getHistoryData} from "@/api/patientREG";

const usePatient = usePatientStore()
const {currentPatient} = storeToRefs(usePatient)
const activeName = ref('3')
const reportObj: any = ref({}) //报告数据

type reporType = {
  visitNo: StrUn //序列号
}
const reporQueryParams = reactive<reporType>({
  visitNo: '',
})
//监听选择的就诊人变化变化
watch(currentPatient, (newValue) => {
  activeName.value = '3' //改变患者
  reporQueryParams.visitNo = newValue.visitNoStr //序列号
  //存储请求数据  打印用
  usePatient.setReporQueryParams(reporQueryParams)
  getReportData()
})

//获取报告数据
const getReportData = () => {
  if (!reporQueryParams.visitNo) {
    return;
  }
  reportData(activeName.value, reporQueryParams).then((res: any) => {
    reportObj.value = res.data || {};
  })
}
//调报告接口
getReportData()

// 历史记录
const showHistory = ref(false)
const historyDataLoading = ref(false)
interface HistoryState {
  historyData: Array<object>
}
const historyState = reactive<HistoryState>({
  historyData: [
    { }
  ]
})
const data = reactive({
  queryHistory: {
    page: 1,
    pageSize: 20,
    total: 0,
  }
})
const {historyData} = toRefs(historyState)
const {queryHistory} = toRefs(data)
const reqHistory = () => {
  historyDataLoading.value = true;
  let params = {
    visitNo: reporQueryParams.visitNo,
    pageNum: queryHistory.value.page,
    pageSize: queryHistory.value.pageSize,
  }
  getHistoryData(params).then((res: any) => {
    historyDataLoading.value = false;
    historyData.value = res.data.data;
    queryHistory.value.total = res.data.total;

    showHistory.value = true;
  })
}
const currentPageChange = (pageNum: number): void => {
  queryHistory.value.page = pageNum;
  reqHistory();
}
</script>

<style scoped lang="less">
.report {
  width: 100%;
  height: 410px;

  .rep_item {
    color: rgba(0, 0, 0, 0.65);
    cursor: pointer;
  }

  .rep_Active {
    color: #00a991;
  }

  .title {
    color: var(--el-text-color-primary);
    font-size: 16px;
    font-weight: 700;
  }
}
.history {
  color: var(--el-color-primary);
  font-size: 12px;
  cursor: pointer;
}
</style>
